<template>
    <div>
      <!-- 图表容器 -->
      <div ref="chartRef" style="width: 400px; height: 300px;"></div>
    </div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts';
  import { ref, onMounted } from 'vue';
  
  const chartRef = ref(null); // 获取图表容器的引用
  
  // 初始化图表数据
  const chartData = [
    { value: 1048, name: '男生', itemStyle: { color: '#3398DB' } }, // 蓝色
    { value: 735, name: '女生', itemStyle: { color: '#FF69B4' } }  // 粉色
  ];
  
  // 初始化图表
  const initChart = () => {
    const myChart = echarts.init(chartRef.value); // 初始化 ECharts 实例
  
    const option = {
      title: {
        text: '男女比例',
        subtext: '基于假数据',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '性别分布',
          type: 'pie',
          radius: '50%',
          data: chartData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  
    // 设置图表选项
    myChart.setOption(option);
  };
  
  // 组件挂载时初始化图表
  onMounted(() => {
    initChart();
  });
  </script>
  
  <style scoped>
  /* 添加一些样式以更好地布局 */
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  </style>
  